
<style>


#com_department{

     background-color: #ffffff;
    background-image: none !important;
    filter: none !important;
    border: 1px solid #e5e5e5;
    outline: none;
    height: 35px !important;
    line-height: 35px;
     padding-left: 10px;
     border-radius: 6px;
}


#user_list{
    width: 50%;
    position: absolute;
    height: 70%;
    top: 10px;
    right: 20px;
   padding: 5px 20px;
    border-width: 1px;
    border-style: solid;
    border-color: #ccc;
    font-size: 16px;
    border-radius: 5px;
    box-sizing: border-box;
    transition: all .5s;
 
  
}

input[type="checkbox"]{
    width: 16px;
    height: 16px;
    margin-right: 10px;

}
button{
    position: absolute;
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%);
    width: 50%;
    height: 40px;
    background-color: #1890FF;
    border-radius: 5px;
    border: none;
    color: #fff;
    font-size: 16px;
    letter-spacing: 1px;
    outline: none;
}
input[type="checkbox"]{
    margin-top: 10px;
}


.magic-radio,
.magic-checkbox {
	position: absolute;
	display: none;
    
}
 

 
.magic-radio + label,
.magic-checkbox + label {
	position: relative;
	display: block;
	padding-left: 30px;
	cursor: pointer;
 
}
 
.magic-radio + label:before,
.magic-checkbox + label:before {
	position: absolute;
	top: 0px;
	left: 0;
	display: inline-block;
	width: 20px;
	height: 20px;
        margin-top: 5px;
	content: '';
	border: 1px solid #c0c0c0;
}
.magic-checkbox + label:before{
    	top: -5px;
}
.magic-radio + label:after,
  .magic-checkbox + label:after {
	position: absolute;
	display: none;
	content: '';
        margin-top: 5px;
}


 
.magic-radio:checked + label:after,
.magic-checkbox:checked + label:after {
	display: block;
}
.magic-radio + label:before {
	border-radius: 50%;
}
.magic-radio + label:after {
	top: 6px;
	left: 6px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #3e97eb;
}
.magic-radio:checked + label:before {
	border: 1px solid #3e97eb;
}
.magic-radio:checked[disabled] + label:before {
	border: 1px solid #c9e2f9;
}

.magic-checkbox + label:before {
	border-radius: 3px;
}
.magic-checkbox + label:after {
	top: 2px;
	left: 7px;
	box-sizing: border-box;
	width: 6px;
	height: 12px;
	transform: rotate(45deg);
	border-width: 2px;
	border-style: solid;
	border-color: #fff;
	border-top: 0;
	border-left: 0;
}
.magic-checkbox + label:after {
    top: -2px;
}
.magic-checkbox:checked + label:before {
    border: #1890FF;
    background: #1890FF;
}
.magic-checkbox:checked[disabled] + label:before {
	border: #1890FF;
	background: #1890FF;
}
</style>
<form id="form1" onsubmit="return false;">
    <input type="hidden" name="id" value="{$id}"/>
    <select name="com_department" id="com_department" style="width: 180px; padding: 2px 0;">
        <option value="0">所有部门</option>
        {foreach name="$com_department" item="vo"}
        <option value="{$vo.id}">
            {for start="0" end="$vo['num']"}
            |-----
            {/for}
            {$vo.name}
        </option>
        {/foreach}
    </select>

    <div id="user_list"></div>

    <button onclick="sub();">确认</button>
</form>
<script type="text/javascript" src="/static/global/jQuery/jquery-2.2.3.min.js"></script>
<script>
    $('#com_department').change(function () {
        var com_department_id = $(this).val();
        show_list(com_department_id)
    });

    //显示人员列表
    function show_list(com_department_id=0){
        $.post(
            "{:url('index_select_lay')}",
            {com_department_id:com_department_id},
            function (res) {
                var data = res.data;
                var html = '';
                for(x in data){
                    html += "<input type='checkbox' name='user_id[]' value='"+data[x].id+"'/><laber>"+data[x].name+'</laber><br/>';
                    
                }
                $('#user_list').html(html);
            }
        );
    }
    show_list();

    //选择人员提交
    function sub() {
        $.post(
            "{:url('index_select_lay_sub')}",
            $('#form1').serialize(),
            function (res) {
                if(res.err == 1){
                    alert(res.msg);
                }else{
                    parent.location.reload();
                    parent.layer.close(parent.layer.getFrameIndex(window.name));
                }
            }
        );
    }
</script>